<template>
<div>

  <el-row>
    <el-col :span="8"><div class="grid-content bg-purple">&nbsp;</div></el-col>
    <el-col :span="8"><div class="grid-content bg-purple-light">
      <div style="margin-top:50px"></div>
      <el-form label-position="left" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="data.u.number"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="data.u.passwd" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-top: 10px" type="primary" @click="login">登录</el-button>
        </el-form-item>

      </el-form>
    </div></el-col>
    <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  </el-row>



</div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import axios from "axios";
export default {
  name: "login",
  data(){
    return{
      data:{
        u:{
          number:'',
          passwd:''
        },
      }
    }
  },
  computed:{
    ...mapState('userOptions',['user'])
  },
  methods:{
    ...mapActions('userOptions',{update:'updateUser',updateLogin:'updateLogin',updateToken:'updateToken'}),
    login(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios.get(`/api/admin/admin/`+JSON.stringify(this.data.u)).then(
          response => {
            if(response.data.code==200){
              this.update(response.data.data)
              loading.close();
              this.$message({
                message: '登录成功，欢迎使用在线考试系统',
                type: 'success'
              });
              this.updateLogin(true)
              this.$router.push("/")
            }else {
              loading.close();
              this.$message.error(response.data.message);
            }
          },
          error => {
            //请求失败
            loading.close();
            this.$message.error('服务繁忙');
          }
      )
    }
  }
}
</script>

<style scoped>

</style>
